<template>
  <div class="app-container">
    <aside>Zabbix 监控触发执行</aside>
          <el-button type="primary" icon="el-icon-plus" size="mini" style="margin-bottom: 10px;">添加告警触发规则</el-button>

    <!-- <el-divider></el-divider> -->
    <div class="user-activity">

    <div class="post" v-for="item in scheme" :key="item.name">
      <div class="user-block">
        <img class="img-circle" :src="'https://wpimg.wallstcn.com/57ed425a-c71e-4201-9428-68760c0537c4.jpg'+avatarPrefix">
        <span class="username text-muted" style="color:rgb(49 24 255)">{{ item.name }}</span>
        <span class="description">{{ item.user }} - {{ item.time }}</span>
      </div>
      <p>
        {{ item.describe }}
      </p>
      <ul class="list-inline">
        <li>
          <span class="link-black text-sm">
            <i class="el-icon-share" />Share</span>
        </li>
        <li>
          <span class="link-black text-sm">
            <svg-icon icon-class="like" />Like</span>
        </li>
      </ul>
    </div>
  </div>

  </div>
</template>

<script>
import { fetchList } from '@/api/ansibleui'
import Sortable from 'sortablejs'
const avatarPrefix = '?imageView2/1/w/80/h/80'
const carouselPrefix = '?imageView2/2/h/440'
export default {
  data() {
    return {
      avatarPrefix,
      carouselPrefix,
      scheme: [
        {'name': 'Web检测访问情况，异常自动重启 nginx', 'user': 'Admin', 'time': '2020.01.01', 'profile':'', 'describe':'Lorem ipsum represents a long-held tradition for designers,typographers and the like. Some people hate it and argue for its demise, but others ignore the hate as they create awesometools to help create filler text for everyone from bacon loversto Charlie Sheen fans.'},
        {'name': '自动处理磁盘报警', 'user': 'System', 'time': '2020.01.01', 'profile':'', 'describe':'Lorem ipsum represents a long-held tradition for designers,typographers and the like. Some people hate it and argue for its demise, but others ignore the hate as they create awesometools to help create filler text for everyone from bacon loversto Charlie Sheen fans.'},
        {'name': '秒杀项目自动扩容方案', 'user': 'QA-Admin', 'time': '2020.01.01', 'profile':'', 'describe':'Lorem ipsum represents a long-held tradition for designers,typographers and the like. Some people hate it and argue for its demise, but others ignore the hate as they create awesometools to help create filler text for everyone from bacon loversto Charlie Sheen fans.'},
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.user-activity {
  .user-block {

    .username,
    .description {
      display: block;
      margin-left: 50px;
      padding: 2px 0;
    }

    .username{
      font-size: 16px;
      color: #000;
    }

    :after {
      clear: both;
    }

    .img-circle {
      border-radius: 50%;
      width: 40px;
      height: 40px;
      float: left;
    }

    span {
      font-weight: 500;
      font-size: 12px;
    }
  }

  .post {
    font-size: 14px;
    border-bottom: 1px solid #d2d6de;
    margin-bottom: 15px;
    padding-bottom: 15px;
    color: #666;

    .image {
      width: 100%;
      height: 100%;

    }

    .user-images {
      padding-top: 20px;
    }
  }

  .list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;

    li {
      display: inline-block;
      padding-right: 5px;
      padding-left: 5px;
      font-size: 13px;
    }

    .link-black {

      &:hover,
      &:focus {
        color: #999;
      }
    }
  }

}

.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}
</style>
